<template>
  <div>
    <h1>留言反馈</h1>
    <div class="submit">
      <!-- {{list_liuyan}} -->
      <el-form :model="userliuyan" :rules="rules" ref="userLiuYan" label-width="80px" >
        <el-form-item label="留言" prop="content">
          <el-input 
          type="textarea" 
          v-model="userliuyan.content" 
          placeholder="请输入内容"
          rows="4"
          ></el-input>
        </el-form-item>
         <el-form-item style="text-align:center;">
             <el-button type="primary" @click="submitForm('userLiuYan')">立即提交</el-button>
             <el-button @click="resetForm('userLiuYan')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="liuyan">
      <ul>
        <li v-for="(item, index) in list_liuyan" :key="index">
            <div>
                <img :src="item.picture" alt=""> 用户：{{item.username}}
            </div>
            <div class="content">
                <p>{{item.content}}</p>
            </div>
            <div class="content">
                <p>回复：{{item.reply}}</p>
            </div>
            <hr>
        </li>
      </ul>
    </div>
       <div style="margin: 20px auto">
      <el-pagination
        style="text-align: center"
        layout="prev, pager, next,jumper"
        :total="total"
        :page-size="pageSize"
        background
        @current-change="current"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list_liuyan: [],
      pageNum: 1,
      pageSize: 5,
      total: 0,
      userliuyan: {
        content: null,
      },
      rules:{
          content:[{required: true,message:'留言内容不能为空'}]
      }
    };
  },
  methods: {
    async getLiuYan(pageNum, pageSize) {
      let { data: res } = await this.$axios.get("/msgboard/getlist", {
        params: {
          pageNum,
          pageSize,
        },
      });
      // window.console.log(res);
      this.total = res.data.total;
      this.list_liuyan = res.data.list;
    },
    current(e) {
      // window.console.log(e);
      this.pageNum = e;
      this.getLiuYan(this.pageNum, this.pageSize);
    },
    submitForm(formName){
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            window.console.log(JSON.stringify(this.$store.state.user))
            this.userliuyan.userId=this.$store.state.user.id
            this.userliuyan.username=this.$store.state.user.username;
            window.console.log(JSON.stringify(this.userliuyan))
            let {data:res}=await this.$axios.post('/msgboard/add',this.userliuyan);
            window.console.log(JSON.stringify(res));
          } else {
           window.console.log('error submit!!');
            return false;
          }
        });
    },
    resetForm(formName){
        this.$refs[formName].resetFields();
    }
  },
  created() {
    this.getLiuYan(this.pageNum, this.pageSize);
  },
};
</script>
<style lang="scss" scoped>
h1 {
  font-size: 40px;
  text-align: center;
  font-weight: 200;
  color: #666;
}
.submit {
  width: 70%;
  margin: 20px auto;
  background-color: rgb(237, 237, 237);
  .el-form{
      width: 90%;
      padding: 20px;
  }
}
.liuyan {
  box-shadow: 0 0 5px skyblue;
  border: 1px solid skyblue;
  width: 70%;
  margin: 0 auto;
  // background-color: antiquewhite;
  ul{
      li{ 
          width: 95%;
          margin: 0 auto;
          // border-bottom: 1px solid skyblue;
          div{
              color: #666;
              display: flex;
              align-items: center;
              img{
                  height: 40px;
                  width: 40px;
                  border-radius: 50%;
                  margin:0 10px;
              }
          }
          .content{
              margin:0 0 5px 60px;
              color: white;
              background-color: rgb(95, 219, 233);
              border-radius: 3px;
          }
          hr{
              margin: 20px 0;
              border: 1.5px solid skyblue;
          }
      }
  }
}
</style>